<%@ page import="com.genghis.ptas.statistic.entity.TypeStatistic" %>
<%@ page import="java.util.List" %>
<%--@elvariable id="typeLen" type="java.lang"--%>
<%--@elvariable id="detailStatistic" type="java.util.List"--%>
<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>

    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>

<!-- BEGIN PIE CHART PORTLET-->
<div class="row">
    <div class="col-md-6">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i> 注册课件
                </div>
                <div class="tools">

                    <a href="javascript:" class="reload">
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <h4>不同子分类注册比重</h4>

                <div id="donut" class="chart">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <!-- BEGIN BASIC CHART PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>用户注册课件量统计图
                </div>
                <div class="tools">

                    <a href="javascript:" class="reload">
                    </a>

                </div>
            </div>
            <div class="portlet-body">
                <div id="chart_1_1_legendPlaceholder">
                </div>
                <div id="chart_1_1" class="chart" style="height: 340px">
                </div>
            </div>
        </div>
        <!-- END BASIC CHART PORTLET-->

    </div>
</div>
<!-- END PIE CHART PORTLET-->

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js"></script>
<script src="assets/scripts/custom/charts.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        getRegisterTypeDate();
    });

    function getRegisterTypeDate() {
        initPieCharts($("#donut"), 0.5)
    }

    function initPieCharts(id, innerRadius) {
        var dataFormat = [];
        var dataRegister = [];
        var tacks = [];
        <%
        List<TypeStatistic> detailStatistic  = (List<TypeStatistic>)request.getAttribute("detailStatistic");
        for(int i=0;i<detailStatistic.size();i++){
        %>
        dataFormat[<%=i%>] = {
            label: "<%=detailStatistic.get(i).getShowType()%>",
            data: "<%=detailStatistic.get(i).getRegisterNumber()%>"
        };
        dataRegister.push([<%=i%> + 1, "<%=detailStatistic.get(i).getRegisterNumber()%>"]);
        tacks.push([<%=i%> + 1, "<%=detailStatistic.get(i).getShowType()%>"]);
        <%
        }
        %>
        tacks.push([<%=detailStatistic.size()%> + 1, "（用户姓名）"]);
        var options = {
            series: {
                lines: {
                    show: false,
                    fill: true,
                    steps: false,
                    lineWidth: 0
                },
                bars: {
                    show: true
                }
            },
            xaxis: {
                tickColor: "#eee",
                ticks: tacks,
                min: 0,
                max: <%=detailStatistic.size()%> + 1
            },
            bars: {
                barWidth: 0.5,
                lineWidth: 0, // in pixels
                shadowSize: 0,
                align: 'center'
            },
            grid: {
                tickColor: "#eee",
                borderColor: "#eee",
                borderWidth: 1,
                hoverable: true,
                clickable: true
            }
        };

        $.plot($("#chart_1_1"),
                [
                    {
                        data: dataRegister,
                        lines: {
                            lineWidth: 1
                        },
                        shadowSize: 0
                    }
                ], options);

        $("#chart_1_1").bind("plothover", pieHover);

        // INTERACTIVE
        $.plot(id, dataFormat, {

            series: {
                pie: {
                    show: true,
                    radius: 1,
                    innerRadius: innerRadius,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
            },
            grid: {
                hoverable: true,
                clickable: false
            }
        });
        id.bind("plothover", pieHover);

        function pieHover(event, pos, obj) {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
        }
    }

</script>
